<template>
  <div class="page">
    <div>child</div>
    <div>aaa: {{props.aaa}}</div>
    <button @click="click_btn">子向父传参，ccc: {{ ccc }}</button>
  </div>
</template>
<script setup lang='ts'>
import { ref } from "vue";

// props 默认值
// 1. js 下
let props = defineProps({
  aaa: {
    type: Number,
    default: 0
  },
  bbb: {
    type: Object,
    default: {
      b: 1
    }
  },
})

// // 2. ts 下
// interface Props {
//   aaa: number,
//   bbb: number
// }
// let props = withDefaults(defineProps<Props>(), {
//   aaa: 0,
//   bbb: 1111
// })0

console.log( 'props', props );


// 子向父传值
// defineEmits 不传数组也能用，会有
let emits = defineEmits(['emit_aaa'])
// let emits = defineEmits()

let ccc = ref(0)
function click_btn(){
  ccc.value = props.aaa + 1
  emits('emit_aaa', ccc.value)
}


// 子组件抛出数据
defineExpose({
  a: ref(111),
  b: 222,
  ccc: ccc
})

</script>

<style lang='scss' scoped>
.page{
  outline: 1px solid red;
}

</style>